<template>
  <view :class="`_card-wrapper ` + classname">
    <view class="_card-title">{{title}}</view>
    <view class="_card-content">
      <template v-if="list.length > 0">
        <view v-for="(item, index) in list" :key="item.value"
            :class="'_card-item ' + `${String(current) === String(item.value) ? 'checked' : ''}`"
            @click="onSelected(item, index)">
          {{ item.label }}
        </view>
      </template>
      <template v-else>
        <xl-empty class="wd100" />
        <view v-if="showService" class="service-wrapper">
          <button class="_service-button" open-type="contact" session-from="xcx" show-message-card
          :send-message-path="sendMessagePath"></button>
          <view class="service-content">
            <view class="txt">联系客服</view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
  import xlEmpty from '@/components/xl-empty';

  const { title } = defineProps({
    title: {
      type: String,
      default: ''
    },
    current: {
      type: [Number, String],
      default: null
    },
    list: {
      type: Array,
      default: () => []
    },
    classname: {
      type: String,
      default: ''
    },
    showService: {
      type: Boolean,
      default: false
    }
  });
  const emit = defineEmits(['change']);

  const onSelected = (item, index) => {
    emit("change", item, index);
  }
</script>
<script>
export default {
  name: "uni-card",
  props: {
    title: {
      type: String,
      default: ''
    },
    current: {
      type: [Number, String],
      default: null
    },
    list: {
      type: Array,
      default: () => []
    },
    classname: {
      type: String,
      default: ''
    }
  },
  methods: {
    onSelected(item, index) {
      this.$emit('change', item, index);
    }
  }
}
</script>

<style lang="scss" scoped>
._card-wrapper {
  background: #FFFFFF;
  border-radius: 23upx;
  padding: 24upx;
  ._card-title {
    font-weight: 600;
    font-size: 28upx;
    line-height: 39upx;
    color: #30302F;
  }
  ._card-content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -16upx;
    ._card-item {
      padding: 16upx 18upx;
      background: #F5F5F5;
      border-radius: 23upx;
      margin-top: 20upx;
      margin-left: 16upx;
      font-weight: 400;
      font-size: 28upx;
      line-height: 39upx;
      color: #30302F;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 148upx;
      &.checked {
        background: #1F1F1F;
        color: #ffffff;
      }
    }
  }
  &.mt-20 {
    margin-top: 20upx;
  }
}
.service-wrapper {
  width: 250upx;
  height: 70upx;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: #461E50;
  border-radius: 10upx;
  .service-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .service {
      width: 90upx;
      height: 90upx;
    }
    .txt {
      color: #7D7D7D;
      font-size: 28upx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-left: 10upx;
      color: #ffffff;
      text-align: center;
    }
  }
  ._service-button {
    width: 200upx;
    height: 150upx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: none;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: none;
    &::after {
      border: none;
      display: none;
    }
    &::before {
      border: none;
      display: none;
    }
}
}
</style>